<template>
    <el-dialog v-model="dialogVisible" title="用户信息" width="650" :close-on-click-modal="false">
        <el-form :model="form" ref="formRef" :rules="rules" label-width="90px" >
            <el-row :gutter="15">
                <el-col :span="12">
                    <el-form-item label="用户名" prop="userName">
                        <el-input v-model="form.userName" placeholder="请填写用户名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="密码" prop="password">
                        <el-input v-model="form.password" placeholder="请填写密码" type="password" show-password></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="姓名" prop="nickName">
                        <el-input v-model="form.nickName" placeholder="请填写姓名"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="手机号" prop="phoneNumber">
                        <el-input v-model="form.phoneNumber" placeholder="请填写手机号"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="部门" prop="deptId">
                        <el-tree-select
                            v-model="form.deptId"
                            :data="deptList"
                            :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                            value-key="deptId"
                            placeholder="选择部门"
                            check-strictly
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="showLabel">
                    <el-form-item label="角色" prop="roleId" >
                        <el-select v-model="form.roleId" placeholder="请选择角色" clearable filterable >
                            <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName" :value="item.roleId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12" v-if="showLabel">
                    <el-form-item label="岗位" prop="postId">
                        <el-select v-model="form.postId" placeholder="请选择岗位" clearable filterable >
                            <el-option v-for="item in postList" :key="item.postId" :label="item.postName" :value="item.postId"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="状态" prop="status" >
                        <el-select v-model="form.status" placeholder="请选择状态" clearable filterable >
                            <el-option label="正常" value="0"></el-option>
                            <el-option label="停用" value="1"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="头像" prop="avatar">
                        <el-upload
                            ref="uploadRef"
                            v-model:file-list="fileList"
                            :action="uploadUrl"
                            list-type="picture-card"
                            :auto-upload="false"
                            :class="{ disabledImg: fileList.length > 0 ? true : false }"
                            :limit="1"
                            :on-success="handleSuccess"
                        >
                            <el-icon><Plus /></el-icon>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="24">
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" type="textarea" placeholder="请输入备注" clearable></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" @click="save">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script>
import { nextTick, reactive, toRefs } from "vue"
import { addUser, updateUser } from "@/api/system/user"

export default {
    name: "temp",
    props: {
        roleList: Array,
        postList: Array,
        deptList: Array,
    },
    emits: ['rest'],
    setup(props, { emit }) {
        const data = reactive({
            dialogVisible: false,
            form: {},
            formRef: null,
            uploadRef: null,
            showLabel: false,
            fileList: [],
            uploadUrl: import.meta.env.VITE_APP_UPLOAD_API,
            rules: {
                userName: [{ required: true, message: '请填写用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请填写密码', trigger: 'blur' }],
                nickName: [{ required: true, message: '请填写姓名', trigger: 'blur' }],
                status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
                deptId: [{ required: true, message: '请选择部门', trigger: 'blur' }],
            }
        })

        const handleSuccess = (response, file, fileList) => {
            // console.log(response, file, fileList, '上传成功')
            data.fileList[0] = {url:response.data.fileUrl}
            data.form.avatar = response.data.fileUrl
            console.log(response, '上传数据');
            submit()
        }

        const save = () => {
            data.formRef.validate((valid) => {
                if (valid) {
                    if(data.fileList.length == 0){
                        submit()
                    }else{
                        data.uploadRef.submit()
                    }
                }
            })
        }

        const openDialog = (row) => { 
            data.dialogVisible = true
            data.form = { ...row }
            if(row.avatar){
                data.fileList = [{url:row.avatar}]
            }else{
                data.fileList = []
            
            }
            if(row.userId){
                console.log('编辑');
                data.showLabel = true
            }else{
                console.log('新增');
                data.showLabel = false
            }
        }

        const cancel = () => {
            data.formRef.resetFields()
            data.fileList = []
            data.dialogVisible = false
            emit('rest')
        }

        const submit = () => {
            let obj = {
                userId: data.form.userId || '',
                avatar: data.form.avatar || '',
                nickName: data.form.nickName || '',
                userName: data.form.userName || '',
                password: data.form.password || '',
                phoneNumber: data.form.phoneNumber || '',
                deptId: data.form.deptId || '',
                roleId: data.form.roleId || '',
                postId: data.form.postId || '',
                status: data.form.status,
                remark: data.form.remark || ''
            }
            if(obj.userId){
                console.log('编辑')
                updateUser(obj).then(res => {
                    console.log(res.data)
                    cancel()
                })
            }else{
                console.log('新增')
                addUser(obj).then(res => {
                    console.log(res.data)
                    cancel()
                })
            }
        }

        return {
            ...toRefs(data),
            openDialog,
            handleSuccess,
            save,
            cancel
        }
    }
};
</script>
<style lang="scss" scoped>
.disabledImg {
	:deep(.el-upload--picture-card) {
		display: none;
	}
}
</style>